<template>
  <div class="recommend" ref="recommend">
    <Scroll ref="scroll" :data="discList" class="recommend-content">
      <div>
        <!-- 轮播图 -->
        <div class="slider-wrapper" v-if="recommend_lists.length">
          <slider>
            <!--填写插槽中的数据-->
            <div v-for="(item,index) in recommend_lists" :key="index">
              <a :href="item.id">
                <img class="needsclick" :src="item.cover" @load="loadImage" />
              </a>
            </div>
          </slider>
        </div>
        <!-- 热门歌单 -->
        <div class="recommend_container">
          <div class="recommend_titile">热门歌单推荐</div>
          <div class="recommend_list">
            <div
              class="list_item"
              v-for="(item,index) in discList"
              :key="index"
              @click="selectToitem(item)"
            >
              <img v-lazy="item.imgurl" alt class="list_item_img" />
              <div class="list_item_text">
                <p class="text_title">{{item.creator.name}}</p>
                <div class="text_bot_left">
                  <p>{{item.dissname}}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 当获取不到歌单列表的数据的时候，显示加载-->
          <div class="loading-container" v-show="!discList.length">
            <loading></loading>
          </div>
        </div>
      </div>
    </Scroll>
    <router-view></router-view>
  </div>
</template>
<script>
import { getRecomment, getDiscList } from "@/api/recommend";
import { ERR_OK } from "@/api/config";
import Slider from "@/base/slider";
import loading from "@/base/loading/loading";
import Scroll from "@/base/scroll/scroll";
import { playlistMixin } from "@/common/js/mixin";
import { mapMutations } from "vuex";
export default {
  mixins: [playlistMixin],
  data() {
    return {
      recommend_lists: [], //轮播图的数据
      discList: [] //热门歌单推荐列表
    };
  },
  components: {
    Slider,
    loading,
    Scroll
  },
  created() {
    // 获取轮播图
    this._getDiscList();
    // 获取热门歌单推荐列表
    this._getRecomment();
  },

  methods: {
    // mixin
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.recommend.style.bottom = bottom;
      this.$refs.scroll.refresh();
    },
    //请求轮播图数据
    _getRecomment() {
      let that = this;
      getRecomment(res => {
        if (res.data.code == ERR_OK) {
          this.recommend_lists =
            res.data.MusicHallHomePage.data.v_shelf[2].v_niche[0].v_card;
        }
      });
    },
    //请求热门歌单的数据
    _getDiscList() {
      getDiscList().then(res => {
        if (res.code === ERR_OK) {
          this.discList = res.data.list;
        }
      });
    },
    //监听图片的加载
    loadImage() {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh();
        this.checkLoaded = true;
      }
    },
    //点击歌单项，跳转到歌单详情
    selectToitem(item) {
      this.$router.push({
        path: `/recommend/${item.dissid}?type=1`
      });
      this.set_disc_state(item)
    },
    ...mapMutations({
      'set_disc_state': 'SET_DISC_STATE'
    })

  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~@/common/stylus/variable.styl';

.recommend {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  background: $color-background;
}

.recommend-content {
  height: 100%;
  overflow: hidden;
}

.recommend_container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: $color-background;

  .slider-wrapper {
    position: relative;
    width: 100%;
  }

  .recommend_titile {
    height: 65px;
    color: $color-theme;
    text-align: center;
    line-height: 65px;
    font-size: $font-size-medium;
  }

  .recommend_list {
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }

  .list_item {
    width: 100%;
    height: 65px;
    display: grid;
    grid-template-columns: 80px auto;
    grid-template-rows: 1;
    grid-gap: 20px;
    font-size: $font-size-small;
    margin-bottom: 20px;

    .list_item_img {
      width: 80px;
      height: 65px;
      grid-column: 1 / 2;
    }

    .list_item_text {
      width: 100%;
      height: 65px;
      display: grid;
      grid-template-rows: 33.3% 33.3% 33.3%;
      grid-template-columns: 45% 10% 45%;
      grid-template-areas: 'text_title text_title text_title';
      '.              .             .';
      'text_bot_left text_bot_right  text_bot_right';

      .text_title {
        grid-row: 1 / 2;
        grid-column: 1 / 4;
      }

      .text_bot_left {
        grid-row: 3 / 4;
        grid-column: 1 / 4;
        display: flex;

        .line {
          margin-left: 15px;
        }
      }

      .text_bot_right {
        grid-row: 3 / 4;
        grid-column: 2 / 4;
      }
    }
  }

  .loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
